<template>
    <v-layout>
        <template slot="header"> 复制文本 </template>
        <template slot="content">
            <div class="exmple-box">
                <div class="operate">
                    <a-input id="input-id" style="margin-right: 4px"></a-input>
                    <a-button type="primary" @click="copyText1" style="margin-right: 4px;">复制1</a-button>
                    <a-button type="primary" @click="() => copyText2()" style="margin-right: 4px;">复制2</a-button>
                    <a-button type="primary" @click="copyText3">复制3</a-button>
                </div>
                <a-textarea placeholder="测试区域" :rows="4" />
            </div>
        </template>
    </v-layout>
</template>

<script>
import vLayout from "@/components/vLayout";

export default {
    components: {
        vLayout,
    },
    data() {
        return {};
    },
    methods: {
        copyText1() {
            const inputText = document.querySelector("#input-id");
            // 没有使用惰性函数，每次复制文本都会做一次判断
            if (navigator.clipboard) {
                // 如果浏览器有clipboard API则直接在剪贴板中写入
                navigator.clipboard.writeText(inputText.value);
            } else {
                // 如果浏览器没有clipboard API（如IE浏览器）
                // 则创建一个input标签并复制相应文本后再销毁创建的input标签（等价于if判断的复制文本效果）
                inputText.setAttribute("value", inputText.value);
                document.body.appendChild(inputText);
                input.select();
                document.execCommand("copy");
                document.body.removeChild(input);
            }
            this.$message.success("复制成功");
        },
        copyText2() {
            console.log('==========')
            const inputText = document.querySelector("#input-id");
            // 没有使用惰性函数，每次复制文本都会做一次判断
            if (navigator.clipboard) {
                // 直接重写copyText函数
                this.copyText2 = () => {
                    // 如果浏览器有clipboard API则直接在剪贴板中写入
                    navigator.clipboard.writeText(inputText.value);
                    this.$message.success("复制成功");
                    console.log('this.copyText2', this.copyText2);
                };
                // 第二次复制文本后copyText函数已被重写
                this.copyText2();
            } else {
                // 直接重写copyText函数
                this.copyText2 = () => {
                    // 如果浏览器没有clipboard API（如IE浏览器）
                    // 则创建一个input标签并复制相应文本后再销毁创建的input标签（等价于if判断的复制文本效果）
                    inputText.setAttribute("value", inputText.value);
                    document.body.appendChild(inputText);
                    input.select();
                    document.execCommand("copy");
                    document.body.removeChild(input);
                    this.$message.success("复制成功");
                    console.log('this.copyText2', this.copyText2);
                };
                // 第二次复制文本后copyText函数已被重写
                this.copyText2();
            }
        },
        copyText3() {
            console.log('==========',this.copyText3)
            const inputText = document.querySelector("#input-id");
            if (navigator.clipboard) {
                // 直接返回原本的copyText函数体
                return () => {
                    navigator.clipboard.writeText(inputText.value);
                    this.$message.success("复制成功");
                    console.log('this.copyText3', this.copyText3);
                };
            } else {
                // 直接返回原本的copyText函数体
                return () => {
                    inputText.setAttribute("value", inputText.value);
                    document.body.appendChild(inputText);
                    input.select();
                    document.execCommand("copy");
                    document.body.removeChild(input);
                    this.$message.success("复制成功");
                    console.log('this.copyText3', this.copyText3);
                };
            }
        },
    },
    mounted() {},
};
</script>

<style lang="less" scoped>
.exmple-box {
    width: 500px;
    .operate {
        display: flex;
        margin-bottom: 16px;
    }
}
</style>
